<template>
    <view class="content">
        <view class="box user-info-title">
            <text class="head">请点击下方授权按钮以获得用户昵称</text>
            <text class="tip">用户昵称: {{userInfo.nickname}}</text>
        </view>
        <view class="box">
            <button class="user-info-button"
                    open-type="getUserInfo"
                    @click="getUserInfo">{{userInfo.nickname ? '已授权' : '点击授权获取用户昵称、头像'}}</button>
        </view>
        <view class="box user-info-title">
            <text class="head">请点击下方授权按钮以绑定手机号</text>
            <text class="tip">手机号: {{phone}}</text>
        </view>

        <view class="box">
            <button class="user-info-button"
                    open-type="getPhoneNumber"
                    @getphonenumber="decryptPhoneNumber">{{ phone ? '已授权' : '获取手机号'}}</button>
        </view>
        <button class="confirm-button" @click="confirm">完成</button>
    </view>
</template>

<script>
    import { updateUserInfo, updateUserPhone, login } from 'libraries/apis/user';

    export default {
        name: 'userinfo',
        data() {
            return {
                userInfo: { nickname: '' },
                phone: '',
                canIUse: uni.canIUse('button.open-type.getUserInfo'),
                encryptedData: '',
                iv: ''
            };
        },
        methods: {
            async onShow() {
                const [loginError, loginResult] = await uni.login({ provider: 'weixin' });
                if (loginError) {
                    console.error(loginError);
                    return;
                }
                await login(loginResult.code);
            },
            async decryptPhoneNumber(event) {
                if (event.detail.errMsg === 'getPhoneNumber:ok') {
                    this.encryptedData = event.detail.encryptedData;
                    this.iv = event.detail.iv;
                    try {
                        this.phone = await updateUserPhone(event.detail.encryptedData, event.detail.iv);
                        await this.$store.dispatch('user/updateUserInfo');
                        uni.showToast({
                            title: '绑定手机成功!',
                            icon: 'success'
                        });
                    } catch (e) {
                        uni.showToast({
                            title: '绑定手机失败!请重新获取',
                            icon: 'none'
                        });
                    }
                }
            },
            async getUserInfo() {
                uni.getUserProfile({
                    desc: '用于完善会员资料',
                    success: (res) => {
                        this.userInfo = {
                            avatar: res.userInfo.avatarUrl,
                            nickname: res.userInfo.nickName
                        };
                        uni.showToast({
                            title: '信息获取成功!',
                            icon: 'success'
                        });
                    },
                    fail() {
                        uni.showToast({
                            title: '信息获取失败',
                            icon: 'none'
                        });
                    }
                });
            },
            async confirm() {
                if (!this.userInfo.nickname || !this.phone) {
                    uni.showToast({
                        title: '请授权信息!',
                        icon: 'none'
                    });
                    return;
                }
                // 更新用户数据
                await updateUserInfo({
                    nickName: this.userInfo.nickname,
                    avatarUrl: this.userInfo.avatar
                });
                await this.$store.dispatch('user/updateUserInfo');
                console.log(this.$store.getters.userInfo);
                console.log(this.userInfo);
                // 更新手机
                uni.navigateBack();
                uni.$emit('onUserRegister');
            }
        }
    };
</script>

<style lang="scss">
@import "~styles/global.scss";
.box{
    width: px2rpx(364);
    padding-top: px2rpx(12);
    padding-bottom: px2rpx(12);
    @include flexColumnCenter;
    align-items: flex-start;
    border-bottom: px2rpx(2) solid #f6f6f6;
    .head{
        font-size: px2rpx(15);
        color: #333;
    }
    .tip{
        font-size: px2rpx(13);
        color: #999;
    }
}
.user-info-button{
    margin: 0;
    padding: 0;
    min-width: 100%;
    height: px2rpx(45);
    @include flexCenter;
    background-color: #18D5BB;
    color: white;
    font-size: px2rpx(15);
}
.userinfo {
    margin: px2rpx(10) 0;
}

.avatar {
    width: px2rpx(100);
    height: px2rpx(100);
    border-radius: 50%;
}
.confirm-button{
    width: px2rpx(200);
    margin-top: px2rpx(300);
    height: px2rpx(45);
    @include flexCenter;
    background-color: #18D5BB;
    color: white;
    font-size: px2rpx(15);
}
</style>
